import { Input, View, Image } from "@tarojs/components";
import { useState, useRef, useEffect } from "react";
import { useToast } from "taro-hooks";
import Protocol from "./Protocol";
import { https, $route } from "@utils/index";

const PhoneLogin = (props) => {
  const pageRef = useRef<{ timer: NodeJS.Timeout | null; count: number }>({
    timer: null,
    count: 60,
  });
  const [captchaImage, setCaptchaImage] = useState("");
  const [uuid, setUuid] = useState("");
  const [phone, setPhone] = useState("");
  // 图形码
  const [captchaCode, setCaptchaCode] = useState("");
  // 短信登录的uuid
  const [smsUuid, setSmsUuid] = useState("");
  const [code, setCode] = useState("");
  // 倒计时
  const [codeCount, setCodeCount] = useState("60s");
  // 短信是否发送成功
  const [smsSendSuccess, setSmsSendSuccess] = useState(false);
  // 是否阅读协议
  const [readProtocol, setReadProtocol] = useState(false);
  const { show } = useToast({ icon: "none" });
  useEffect(() => {
    getCaptchaImage();
  }, []);
  // 获取图形验证码
  const getCaptchaImage = () => {
    https.getCaptchaImage().then((res) => {
      setCaptchaImage(`data:image/gif;base64,${res.data.data.img}`);
      setUuid(res.data.data.uuid);
      setCaptchaCode("");
      setCode("");
      setSmsUuid("");
    });
  };
  // 登录
  const codeLogin = () => {
    if (!phone) {
      show({ title: "请输入手机号!" });
      return;
    }
    if (!code) {
      show({ title: "请输入手机验证码!" });
      return;
    }
    if (!readProtocol) {
      show({ title: "请阅读并同意协议!" });
      return;
    }
    https
      .codeLogin({
        phone,
        sms_uuid: smsUuid,
        sms_code: code,
      })
      .then(() => {
        // 登录成功后获取用户信息
        return https.getUserInfo();
      })
      .then(() => {
        $route.back();
      });
  };
  // 发送手机验证码
  const getSmsCode = () => {
    if (!phone) {
      show({ title: "请输入手机号!" });
      return;
    }
    if (!captchaCode) {
      show({ title: "请输入图形验证码!" });
      return;
    }
    if (pageRef.current.timer) {
      clearInterval(pageRef.current.timer);
    }
    https
      .getSmsCode({
        phone,
        image_captcha_uuid: uuid,
        image_captcha_code: captchaCode,
      })
      .then((res) => {
        setSmsUuid(res.data.data.uuid);
        setSmsSendSuccess(true);
        pageRef.current.timer = setInterval(() => {
          if (pageRef.current.count > 0) {
            pageRef.current.count--;
          } else {
            if (pageRef.current.timer) {
              clearInterval(pageRef.current.timer);
            }
            setSmsSendSuccess(false);
            pageRef.current.count = 60;
          }
          setCodeCount(`${pageRef.current.count}s`);
        }, 1000);
      })
      .catch(() => {
        show({ title: "验证码发送失败!" });
        getCaptchaImage();
      });
  };
  return (
    <View className="ml-[30px] mr-[30px] bg-[#fff] rounded-[10px] p-[30px]">
      <View className="flex items-center h-[100px] text-[28px] text-[#666] border-0 border-b-[1px] border-[#eee] border-solid">
        <Input
          onInput={(e) => setPhone(e.detail.value)}
          value={phone}
          placeholder="请输入手机号"
          className="grow text-[28px] text-[#666]"
        />
      </View>
      <View className="flex items-center h-[100px] text-[28px] text-[#666] border-0 border-b-[1px] border-[#eee] border-solid">
        <Input
          onInput={(e) => setCaptchaCode(e.detail.value)}
          value={captchaCode}
          placeholder="请输入图形验证码"
          className="grow text-[28px] text-[#666]"
        />
        <Image
          onClick={getCaptchaImage}
          src={captchaImage}
          className="flex-none w-[160px] h-[70px] ml-[10px]"
        />
      </View>
      <View className="flex items-center h-[100px] text-[28px] text-[#666] border-0 border-b-[1px] border-[#eee] border-solid">
        <Input
          onInput={(e) => setCode(e.detail.value)}
          value={code}
          placeholder="请输入手机验证码"
          className="grow text-[28px] text-[#666]"
        />
        {smsSendSuccess ? (
          <View className="ml-[10px] text-[#999] flex-none">{codeCount}</View>
        ) : (
          <View
            onClick={getSmsCode}
            className="ml-[10px] text-[#f60] flex-none"
          >
            获取验证码
          </View>
        )}
      </View>
      <View
        onClick={props?.onChangeLoginType}
        className="mt-[30px] text-[24px] text-[#f60] leading-[45px]"
      >
        快捷登录
      </View>
      <View
        onClick={codeLogin}
        className="rui-flex-cc mt-[50px] bg-[#f60] h-[90px] text-[#fff] rounded-[50px] text-[28px]"
      >
        登录
      </View>
      <Protocol
        isRead={readProtocol}
        onChange={setReadProtocol.bind(null, !readProtocol)}
      />
    </View>
  );
};

export default PhoneLogin;
